import React, { useState } from 'react';
import { Button, Col, Drawer, Form, Input, Row, Select, Space, Radio, Progress } from 'antd';

const { Option } = Select;

export interface CreateFormValueType extends Partial<TeacherAPI.UpdateTeacherParam> {
  cardId?: string;
  mobile?: string; // 手机号
  name?: string; // 姓名
  birthday?: string; // 出生日期，假设后端返回的是 ISO 8601 格式的日期字符串
  gender?: number; // 性别
  parentName?: string; // 家长姓名
  parentRelationship?: string; // 和孩子关系
  schoolName?: string; // 学校名称
  address?: string; // 家庭住址
  comment?: string; // 备注
  visitorId?: number; // 访客ID
}

export interface FormProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: CreateFormValueType) => Promise<void>;
}




const App: React.FC<FormProps> = (props) => {

  const [form] = Form.useForm();

  return (
    <>
      <Drawer
        title="登记课时"
        width={420}
        onClose={() => props.onCancel()}
        open={props.visible}
        styles={{
          body: {
            paddingBottom: 80,
          },
        }}
        extra={
          <Space>
            <Button onClick={() => props.onCancel()}>取消</Button>
            <Button onClick={() => props.onSubmit(form.getFieldsValue())} type="primary">
              提交
            </Button>
          </Space>
        }
      >
        <Form
          layout="vertical"
          form={form}
        >
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="cardId"
                label="会员卡号"
                rules={[{ required: true, message: '请输入会员卡号' }]}
              >
                <Input placeholder="请输入会员卡号" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
                <Form.Item
                  name="name"
                  label="姓名"
                  rules={[{ required: true, message: '请输入姓名' }]}
                >
                  <Input placeholder="请输入姓名" />
                </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="classroom"
                label="学生所在教室"
                rules={[{ required: true, message: 'Please pick an item!' }]}
              >
                <Radio.Group>
                  <Radio.Button value="a">演奏教室</Radio.Button>
                  <Radio.Button value="b">小组教室</Radio.Button>
                  <Radio.Button value="c">练习教室</Radio.Button>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="teacher"
                label="教师"
                rules={[{ required: true, message: 'Please pick an item!' }]}
              >
                <Radio.Group>
                  <Radio.Button value="a">丹老师</Radio.Button>
                  <Radio.Button value="b">李老师</Radio.Button>
                  <Radio.Button value="c">王老师</Radio.Button>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="major"
                label="科目"
                rules={[{ required: true, message: 'Please pick an item!' }]}
              >
                <Radio.Group>
                  <Radio.Button value="a">钢琴</Radio.Button>
                  <Radio.Button value="b">吉他</Radio.Button>
                  <Radio.Button value="c">架子鼓</Radio.Button>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="courses"
                label="剩余课时"
              >
                <Progress steps={20} percent={50} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </>
  );
};

export default App;